<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>角色列表</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css" />
</head>
<body>
<!--导航栏-->
<div  th:replace="admin/_fragments :: nav">
    <nav class="navbar navbar-inverse navbar-static-top" role="navagation">
        <div class="container">
            <!-- logo -->
            <div class="navbar-header">
                <a href="#" class="navbar-brand">管理后台</a>
            </div>
            <div id="navbar" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                    <li ><a href="#" th:href="admin"><i class="glyphicon glyphicon-th"></i>&nbsp;角色管理</a></li>
                </ul>
            </div>
        </div>
    </nav>
</div>

<!-- 中间内容-->
<div  class="container">
    <div style="margin-top: 3.125rem;">
        <!--操作结果信息展示区-->
        <div th:if="${message} != null" class="alert alert-info alert-dismissible" role="alert">
            <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h2>提示：</h2>
            <p style="font-size: 20px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[[${message}]]</p>
        </div>

        <!-- 搜索部分 -->
        <div class="well">
            <div class="navbar-form">
                <div class="form-group">
                    <input type="text" class="form-control" id="rname" name="rname" placeholder="角色名称">
                </div>
                <div class="form-group">
                    <select class="form-control" name="status">
                        <option value="-1">全部</option>
                        <option value="0">未发布</option>
                        <option value="1">已发布</option>
                    </select>
                </div>
                <button type="button" class="btn btn-warning" onclick="reset()">清空</button>
                <button type="button" class="btn btn-success" onclick="search()">搜索</button>
            </div>
        </div>

        <!-- 搜索结果 -->
        <div id="role_div" class="panel panel-default">
            <table th:fragment="role_table" class="table table-hover" style="border: solid #337AB7 0.0625rem;">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>角色名称</th>
                        <th>排序字段</th>
                        <th>状态</th>
                        <th>角色描述</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                <tr th:each="role, iterState : ${pageInfo.list}">
                    <td th:text="${iterState.count}">1</td>
                    <td th:text="${role.rname}">发单者</td>
                    <td th:text="${role.sortnum}">2</td>
                    <td th:text="${role.status} ? '已发布' : '未发布'">已发布</td>
                    <td th:text="${role.remark}">备注信息</td>
                    <td>
                        <div class="btn-group">
                            <a th:href="@{/admin/roles/delete(id=${role.id})}" class="btn btn-danger">删除</a>
                            <a th:href="@{/admin/roles/update(id=${role.id})}" class=" btn btn-primary">编辑</a>
                        </div>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <th colspan="6">
                        <div>
                            <button type="button" th:if="${pageInfo.pageNum} ne '1'" class="btn btn-default" th:attr="data-pagenum=${pageInfo.prePage}" onclick="nextPage(this)" >上一页</button>
                            <button type="button" th:if="${pageInfo.pageNum} ne ${pageInfo.pages}" class="btn btn-default" th:attr="data-pagenum=${pageInfo.nextPage}" onclick="nextPage(this)">下一页</button>
                        </div>
                    </th>
                    <th>
                        <div class="text-right">
                            <a href="#"  class="btn btn-success" th:href="@{/admin/roles/input}">新增</a>
                        </div>
                    </th>
                </tr>
                </tfoot>
            </table>
        </div>
    </div>
</div>
<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
<script type="text/javascript" src="../../static/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../../static/js/bootstrap.min.js"></script>
<!--/*/</th:block>/*/-->

<script>
    // 翻页功能
    function nextPage(obj) {
        var pageNum = $(obj).data("pagenum");
        loadData(pageNum);
    }

    // 查找功能
    function search() {
        loadData(1);
    }

    // 将所有筛选条件‘清零’
    function reset() {
        $("#rname").val("");
        $("select[name='status']").val(-1);
    }

    // 刷新表格
    function loadData(pageNum) {
        var rname = $("#rname").val();
        var status= $("select[name='status']").val();
        // 刷新表格
        $("#role_div").load(/*[[@{/admin/roles/condition}]]*/"/admin/roles/condition", {
            rname : rname,
            status : status,
            pageNum : pageNum
        });
    }
</script>
</body>
</html>
